<!--  -->
<template>
  <el-dialog
    :title="dialogTitle"
    :visible="isShow"
    width="574px"
    :before-close="handleClose"
    :close-on-click-modal="false"
  >
    <div class="dialog-container">
      <div class="dialog-children">
        <el-form
          ref="ruleForm"
          :model="ruleForm"
          :rules="rules"
          :label-width="handleScreenWidthToVw(100) +'px'"
          class="demo-ruleForm"
        >
          <el-form-item label="方案名称：" prop="name">
            <el-input
              v-model="ruleForm.name"
              :style="{width: handleScreenWidthToVw(220) + 'px'}"
              placeholder="请输入方案名称"
            />
          </el-form-item>
          <el-form-item label="计量单位：" prop="unit">
            <el-input
              v-model="ruleForm.unit"
              :style="{width: handleScreenWidthToVw(220) + 'px'}"
              placeholder="请输入计量单位"
            />
          </el-form-item>

          <el-form-item label="计费单价：" prop="unitPrice">
            <div :style="{width: handleScreenWidthToVw(220) + 'px'}" class="flex-row">
              <el-input
                class="flex-sub"
                v-model="ruleForm.unitPrice"
                placeholder="请输入计费单价"
              />
              <div class="pd-left-10 fz-14 flex-row" style="flex-wrap: nowrap;">
                <div>元</div>
                <div v-show="ruleForm.unit">/{{ ruleForm.unit }}</div>
              </div>
            </div>
          </el-form-item>

          <el-form-item label="计费面积：" prop="initUsed">
            <div class="flex-row" :style="{width: handleScreenWidthToVw(220) + 'px'}">
              <el-input
                class="flex-sub"
                v-model.number="ruleForm.initUsed"
                placeholder="请输入计费面积"
              />
              <div class="pd-left-10 fz-14">{{ ruleForm.unit }}</div>
            </div>
          </el-form-item>

          <el-form-item label="缴费日期：" prop="payTime">
            <div class="flex-row" :style="{width: handleScreenWidthToVw(220) + 'px'}">
              <div class="pd-right-10 fz-14">每月</div>
              <el-date-picker
                v-model="ruleForm.payTime"
                type="date"
                placeholder="选择日期"
                class="flex-sub"
                format="d"
                value-format="timestamp"
              />
              <div class="pd-left-10 fz-14">号</div>
            </div>
          </el-form-item>

          <el-form-item label="说明备注：" prop="remark">
            <el-input
              v-model="ruleForm.remark"
              placeholder="请输入说明备注"
              :style="{width: handleScreenWidthToVw(220) + 'px'}"
            />
          </el-form-item>
        </el-form>
      </div>
    </div>
    <div slot="footer" class="dialog-footer">
      <el-button :loading="isLoading" type="primary" size="small" @click="handleSubmit">
        提交
      </el-button>
      <el-button size="small" @click="handleClose">取 消</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { handleScreenWidthToVw } from '@/utils/tools'

export default {
  props: {
    isShow: { type: Boolean, default: false },
    initData: { type: Object, default: () => {} },
  },
  data() {
    return {
      imageUrl: '',
      ruleForm: {},
      fileList: [],
      title: '新增',
      isLoading: false,
    }
  },

  watch: {
    initData: {
      immediate: true,
      deep: true,
      handler: function (value) {
        this.isLoading = false

        if (typeof value === 'object') {
          this.ruleForm = { ...value }
          value.id && (this.title = '修改')
          this.$nextTick(() => {
            this.$refs.ruleForm && this.$refs.ruleForm.clearValidate()
          })
        }
      },
    },
  },

  computed: {
    rules() {
      return {
        name: [{ required: true, message: '请输入方案名称', trigger: 'change' }],
        unit: [{ required: true, message: '请输入计量单位', trigger: 'change' }],
        unitPrice: [{ required: true, message: '请输入计量单价', trigger: 'change' }],
        initUsed: [{ required: true, message: '请输入计费面积', trigger: 'change' }],
        payTime: [{ required: true, message: '请选择缴费日期', trigger: 'change' }],
      }
    },
    dialogTitle() {
      return `${this.title}支出方案`
    },
    handleScreenWidthToVw() {
      return handleScreenWidthToVw
    },
  },

  methods: {
    handleClose() {
      this.$emit('close')
    },
    handleSuccess(fileList) {
      this.imageUrl = fileList[fileList.length - 1].url
      this.fileList = [fileList[fileList.length] - 1]
    },
    handleSubmit() {
      this.$refs.ruleForm.validate(valid => {
        if (valid) {
          this.isLoading = true
          this.$emit('submit', this.ruleForm)
        }
      })
    },
    handleCloseLoading() {
      this.isLoading = false
    },
  },
}
</script>
<style lang="scss" scoped>
.dialog-container {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}

.dialog-children {
  flex-shrink: 0;
}

.upload-info {
  position: relative;
  overflow: hidden;
  cursor: pointer;
}

.avatar-uploader-icon {
  width: 160px;
  height: 160px;
  font-size: 28px;
  line-height: 160px;
  color: #8c939d;
  text-align: center;
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
}

.avatar {
  display: block;
  width: 160px;
  height: 160px;
  border-radius: 50%;
}

.el-upload__tip {
  width: 100%;
  margin-top: 20px;
  font-size: 14px;
  color: #333;
  text-align: center;
}

::v-deep .el-form-item {
  margin-bottom: 18px;
}

.dialog-footer {
  text-align: center;
}

::v-deep .el-input--prefix .el-input__inner {
  padding-left: 15px;
}

::v-deep .el-input__prefix {
  right: 5px;
  left: auto;
}
</style>
